<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表Key的原理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 方案1 :key="item.id" -->
				<!-- 方案2 :key="index" -->
				<!-- 
					正着添加 方案1和方案2都可以
					倒着添加 只能使用方案1 
				-->
				<li v-for="(item,index) in userObjList" :key="item.id">
					姓名：{{ item.username }} 年龄: {{ item.age }}
					<input type="text">
				</li>
			</ul>
			<button type="button" @click="addUser">添加用户</button>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					userObjList:[
						{id:1,username:'张三',age:18},
						{id:2,username:'李四',age:19},
						{id:3,username:'王五',age:20}
					]
				},
				methods:{
					addUser(){
						const user = {id:4,username:'赵六',age:21}
						//在数组中追加数据  保证添加数据格式和已有数据格式一致
						//在后面追加
						//this.userObjList.push(user);
						//在前面追加
						this.userObjList.unshift(user);
					}
				}
			})
		</script>
	</body>
</html>
